import dvTool from "@/pages/dv/dvTool";
import TabsFormPanel from '../TabsFormPanel';
import {wrapperType, EnumControlType, ITabsFields, layouts, ITabPanel} from "@/pages/dv/constants/EnumCommon";
import {get, set, isEmpty} from "lodash";



/**
 * 1、Echarts主题导致配置项默认值改变---当前默认主题为 dark
 */
export default class CommonPanel extends TabsFormPanel{

  /**
   * 配置发生变动时
   * @param changedValues
   * @param allValues
   */
  onValuesChange = (changedValues: any, allValues: any) => {
    this.chart.update(changedValues);
    dvTool.updateAdvanceConfig(this.uid,{option: changedValues});
  }


  /**
   * 合并初始值
   */
  mergeDefaultValue(initialValues: object): object{
    const option = this.myChart.getOption();
    const fields = this.getAllFields();
    fields.forEach(fieldName => {
      let value;
      let path = fieldName.split('.');
      if(Array.isArray(option[path[0]])){
        path.splice(1, 0 , '0');
        value = get(option, path);
      } else{
        value = get(option, path);
      }
      if(!isEmpty(value)){
        // 开始合并
        set(initialValues, fieldName, value);
      }
    })
    return initialValues;
  }

  /**
   * 基础配置枚举
   */
  getBasicPanes(): ITabPanel[] {
    return [
      {title: 'X轴', value: 'xAxis', fields: this.xAxis()},
      {title: 'Y轴', value: 'yAxis', fields: this.yAxis()},
    ]
  }

  xAxis(): ITabsFields[] {
    return [
      {
        propType: 'boolean',
        controlType: EnumControlType.Switch,
        formItemProps: {
          name: 'xAxis.show',
          label: '是否显示x轴',
          valuePropName: 'checked',
          initialValue: true,
        },
      },
      {
        propType: 'string',
        controlType: EnumControlType.RadioGroup,
        formItemProps: {
          name: 'xAxis.type',
          label: '坐标轴类型',
          initialValue: 'category'
        },
        layout: layouts.vertical,
        data: [
          {
            value: 'category',
            label: '类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'
          },
          {
            value: 'value',
            label: '数值轴，适用于连续数据。'
          },
          {
            value: 'time',
            label: '时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'
          },
          {
            value: 'log',
            label: '对数轴。适用于对数数据。'
          }
        ]
      },
      {
        propType: 'string',
        controlType: EnumControlType.Input,
        formItemProps: {
          name: 'xAxis.name',
          label: '坐标轴名称'
        },
      },
      {
        propType: 'string',
        controlType: EnumControlType.RadioGroup,
        formItemProps: {
          name: 'xAxis.nameLocation',
          label: '坐标轴名称显示位置',
          initialValue: 'end'
        },
        layout: layouts.vertical,
        data: [
          {value: 'start', label: 'start'},
          {value: 'center', label: 'center'},
          {value: 'end', label: 'end'}
        ]
      },
      {
        type: wrapperType.divider
      },
      {
        name: 'xAxis.axisLine',
        label: '坐标轴轴线相关设置',
        propType: 'object',
        type: wrapperType.group,
        groupFields: [
          {
            propType: 'boolean',
            controlType: EnumControlType.Switch,
            formItemProps: {
              name: 'xAxis.axisLine.show',
              label: '是否显示坐标轴轴线',
              valuePropName: 'checked',
              initialValue: true
            },
          },
          {
            propType: 'Color',
            controlType: EnumControlType.ColorPicker,
            formItemProps: {
              name: 'xAxis.axisLine.lineStyle.color',
              label: '坐标轴轴线的颜色',
              initialValue: '#333',
            },
            layout: layouts.vertical
          },
        ]
      },
    ]
  }

  yAxis(): ITabsFields[] {
    return [
      {
        propType: 'boolean',
        controlType: EnumControlType.Switch,
        formItemProps: {
          name: 'yAxis.show',
          label: '是否显示y轴',
          valuePropName: 'checked',
          initialValue: true
        },
      },
      {
        propType: 'string',
        controlType: EnumControlType.RadioGroup,
        formItemProps: {
          name: 'yAxis.type',
          label: '坐标轴类型',
          initialValue: 'value'
        },
        layout: layouts.vertical,
        data: [
          {
            value: 'category',
            label: '类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。'
          },
          {
            value: 'value',
            label: '数值轴，适用于连续数据。'
          },
          {
            value: 'time',
            label: '时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'
          },
          {
            value: 'log',
            label: '对数轴。适用于对数数据。'
          }
        ]
      },
      {
        propType: 'string',
        controlType: EnumControlType.Input,
        formItemProps: {
          name: 'yAxis.name',
          label: '坐标轴名称'
        },
      },
      {
        propType: 'string',
        controlType: EnumControlType.RadioGroup,
        formItemProps: {
          name: 'yAxis.nameLocation ',
          label: '坐标轴名称显示位置',
          initialValue: 'end'
        },
        layout: layouts.vertical,
        data: [
          {value: 'start', label: 'start'},
          {value: 'center', label: 'center'},
          {value: 'end', label: 'end'}
        ]
      },
      {
        type: wrapperType.divider
      },
      {
        name: 'yAxis.axisLine',
        label: '坐标轴轴线相关设置',
        propType: 'object',
        type: wrapperType.group,
        groupFields: [
          {
            propType: 'boolean',
            controlType: EnumControlType.Switch,
            formItemProps: {
              name: 'yAxis.axisLine.show',
              label: '是否显示坐标轴轴线',
              valuePropName: 'checked',
              initialValue: true
            },
          },
          {
            propType: 'Color',
            controlType: EnumControlType.ColorPicker,
            formItemProps: {
              name: 'yAxis.axisLine.lineStyle.color',
              label: '坐标轴轴线的颜色',
              initialValue: '#333',
            },
            layout: layouts.vertical
          },
        ]
      },
    ]
  }
}
